<template>
	<view class="out-box">
		<!-- <view class="tabs">
			<view class="tabs_item" @tap="changetabs(1)">
				<view class="name">付费转让</view>
				<view class="colorblack" v-show="nofreetransfer == 1"></view>
			</view>
			<view class="tabs_item" @tap="changetabs(0)">
				<view class="name">免费转让</view>
				<view class="colorblack" v-show="nofreetransfer == 0"></view>
			</view>
		</view> -->
		<view class="henfu">店铺空置持续亏钱，提交资料，早曝光早转出</view>
		<view v-show="nofreetransfer == 1">
			<view class="upimg">
				<view class="imglist">请上传房源图片<span class="span1">(最多6张，非必填)</span></view>
				<uni-group  top="0">
					<cl-upload v-model="list" 
						useBeforeDelete
						useBeforeUpload
						fileType="image"
						:jztpppp="baseFormData.jztp"
						@beforeDelete="beforeDelete"
						@beforeUpload="beforeUpload"
						:imageFormData="imageFormData"
						:videoFromData ="videoFromData"
						ref="upload2"
					></cl-upload>
				</uni-group>	
			</view>

<!-- 			<view class="adress" v-show="baseFormData.detail_address">
				<view class="adressName">
					<view class="name">房源地址<span class="span1">(点击右方地图上选择位置信息)</span></view>
					<view class="adree_icon" @tap="tomap">
						<image class="img" src="../../static/images/定位2.png"></image>
						<view class="text">选择位置</view>
					</view>
				</view>
				<textarea class="adressTextarea" v-model="baseFormData.detail_address" :placeholder-style="placeholderStyle" placeholder="请输入..."></textarea>
			</view>
			<view class="adress" v-show="!baseFormData.detail_address">
				<view class="adressName">
					<view class="name">房源地址<span class="span1">(点击下方地图上选择位置信息)</span></view>
				</view>
				<view class="adressimg" @tap="tomap">
					<image class="img" src="../../static/images/定位1.png"></image>
					<view class="text">点击选择地址</view>
				</view>
			</view> -->

			<view class="user">
				<view class="user_item">
					<view class="name">联系电话</view>
					<input class="user_input" type="number" @focus="focus" v-model="baseFormData.phone" placeholder="请填写联系方式" :placeholder-style="placeholderStyle">
					<view class="isjy" v-show="baseFormData.isshowphone">请填写正确的联系方式</view>
				</view>
				<view class="user_item">
					<view class="name">店铺地址</view>
					<view class="Address-item">
						<picker mode="multiSelector" :value="multiIndex" 
						:range="newAddressList" range-key="label"
							@change="pickerChange" @cancel="pickerCancel"
							 @columnchange="pickerColumnchange">
								<view class="uni-input">{{addressList.join('-')}}</view>
						</picker>
					</view>
					<view class="address_i"></view>
				</view>
				<view class="user_item">
					<view class="name">面积 (m²)</view>
					<input class="user_input" type="number" placeholder="请填写房源面积" v-model="baseFormData.area" :placeholder-style="placeholderStyle">
				</view>
				<view class="user_item">
					<view class="name">租金 (元/月)</view>
					<input class="user_input" type="number" placeholder="请填写店铺租金" v-model="baseFormData.rent" :placeholder-style="placeholderStyle">
				</view>
			</view>
<!-- 			<view class="facilities">
				<view class="facilities_item">
					<view class="name">所属行业或原用途</view>
					<view class="isjy" v-show="baseFormData.isshowshop_type_one">请选择所属行业或原用途</view>
					<view class="item_delete">
						<uni-data-picker clear-icon="false"  placeholder="请选择房源所属行业或原用途" 
							popup-title="请选择房源所属行业或原用途" :localdata="options"
							@change="onchange" @popupopened="popupopened">
						</uni-data-picker>
						<image class="img" src="../../static/images/下箭头.png"></image>
					</view>
				</view>
				<view class="facilities_item">
					<view class="name">房源有什么配套设施及优势（非必填）</view>
					<view class="item_delete">
						<view class="text" v-show="!baseFormData.checkbox3" @tap="opencheckboxarr">请选择房源配套设施及优势</view>
						<view class="text1" v-show="baseFormData.checkbox3" @tap="opencheckboxarr">{{baseFormData.checkbox3}}</view>
						<image class="img" src="../../static/images/下箭头.png"></image>
					</view>
					
				</view>
			</view> -->
			<view class="adress" style="margin-bottom: 140rpx;">
				<view class="adressName">
					<view class="name">填写转让标题，可增加店铺曝光哟</view>
				</view>
				<textarea class="adressTextarea" v-model="baseFormData.title" :placeholder-style="placeholderStyle" placeholder="转让例如：（急转）上海市150㎡商业街店铺转让"></textarea>
			</view>
		</view>
		<view v-show="nofreetransfer == 0">
			<view class="user">
				<view class="user_item">
					<view class="name">联系电话</view>
					<input class="user_input" type="number" v-model="baseFormData.phone" placeholder="请填写联系方式" :placeholder-style="placeholderStyle">
				</view>
			</view>
			<view class="adress">
				<view class="adressName">
					<view class="name">转让标题<span class="span1">（最多可输入15字）</span></view>
				</view>
				<textarea class="adressTextarea" v-model="baseFormData.titlefree" :placeholder-style="placeholderStyle" placeholder="请填写转让标题"></textarea>
			</view>
		</view>
		<view class="buttom">
			<view class="buttom1" @tap="to_release">提交资料 抢占曝光位</view>
			<view class="buttom2" @tap="backindex">退出</view>
		</view>
	</view>

	<uni-popup ref="mapprops" :mask-click="false" :safe-area="false">
		<view class="mapcenter">
			<map class="map" :latitude="mapval.latitude" :longitude="mapval.longitude"  
			:markers="mapval.markers" @regionchange="handleRegionChange"
			:show-location="true"
			></map>
			<view class="movemakerdown"></view>

			<view class="mapicon" @tap="onpositioning">
				<image class="img1" src="../../static/images/dwmap.png"></image>
			</view>
			<view class="illustrate">
				<view class="tit">商铺位置<span class="span1">（滑动地图可更改位置）</span></view>
				<textarea class="title_sty2" type="text" 
						v-model="baseFormData.detail_address" :placeholderStyle="placeholderStyle" ></textarea>
				<view class="sbmits">
					<view class="close" @tap="closemap">取消</view>
					<view class="sbmit" @tap="torelease">确定</view>
				</view>

			</view>
		</view>
	</uni-popup>

	<uni-popup ref="shopTypePupop" :safe-area="false">
		<view class="shopType">
			<view class="title">请选择房屋配套设施及优势</view>
			<view class="chacha" @tap="closecheckboxarr"></view>
			<viwe class="checkbox">
				<uni-data-checkbox multiple 
					v-model="checkbox2" 
					@change="checkboxarr(e)"
					mode="tag" 
					selectedColor="rgba(0, 92, 241, 1)" 
					:localdata="hobby">
				</uni-data-checkbox>
			</viwe>
			<view class="sure">
				<view class="colse" @tap="clearcheckboxarr">取消</view>
				<view class="qr" @tap="closecheckboxarr">确定</view>
			</view>	
		</view>
	</uni-popup>
	
	<uni-popup ref="wltk">
		<view class="wltkcss" @tap="closebackrouter">
			<image class="colse" @tap.stop="tkcc" src="../../static/images/7.png"></image>
		</view>
	</uni-popup>

	
	<view>
		<Verify
			@success="checkSuccess"
			:mode="'pop'"
			:captchaType="'clickWord'"
			:imgSize="{ width: '330px', height: '155px' }"
			ref="verify"
		></Verify>
	</view>
	
</template>  

<script setup>
import {ref,reactive,onBeforeMount,onMounted,watchEffect,onBeforeUnmount } from 'vue'
import areaData from '../../static/js/area-data1'
import {onGotApiData,addClick,ongetphone} from '../../util/api.js'
import {onLoad, onShow, onHide } from '@dcloudio/uni-app'
import Verify from "../../components/verify/verify"
import { options  } from '../../static/js/shop_type.js';

	// 从上个页面获取到参数
	const props = defineProps({
		PublishSource: String,
		indextoxq: String,
	});

// 在组件渲染之前执行
onBeforeMount(() => {
	
	console.log('组件准备渲染',props);
	

	addClick('资料填写页访问',props.indextoxq)
	
	baseFormData.channel_no = uni.getStorageSync('channel_no') || '';
	baseFormData.link = uni.getStorageSync('link') || '';
	baseFormData.pois  = uni.getStorageSync('pois') || ''
	// 判断一下有没有取到值
	const provinceone = uni.getStorageSync('province') || '';
	const cityone = uni.getStorageSync('city')|| '';
	const districtone = uni.getStorageSync('district')|| '';
	baseFormData.township = uni.getStorageSync('township')|| '';
	if(provinceone!= []&&provinceone!= ''&&cityone!= []&&cityone!= ''&&districtone!= []&&districtone!= ''){
		// 赋值到列表展示
		addressList[0] = provinceone
		addressList[1] = cityone
		addressList[2] = districtone
		
		
		baseFormData.province = provinceone
		baseFormData.city = cityone
		baseFormData.county = districtone

		baseFormData.longitude = uni.getStorageSync('longitude') || '';
		baseFormData.latitude = uni.getStorageSync('latitude') || '';
		baseFormData.location = ""+baseFormData.longitude+ ',' +baseFormData.latitude
		mapval.longitude = uni.getStorageSync('longitude') || '';
		mapval.latitude = uni.getStorageSync('latitude') || '';
		mapval.markers.longitude = uni.getStorageSync('longitude') || '';	
		mapval.markers.latitude = uni.getStorageSync('latitude') || '';
		mapval.formatted_address =  uni.getStorageSync('formatted_address') || '';
		baseFormData.detail_address =  uni.getStorageSync('formatted_address') || '';

	}else{
		// 获取位置
		onpositioning()
	}
	// 二级页面店铺类型的接口
	shop_type_get()
	// 初始化地区的数组
	initAddress();
	// 设置一个定时器
	jsqtimer.fun = setInterval(()=>{
		jsqtimer.value ++
		console.log('jsqtimer.value',jsqtimer.value)
	},1000)

})
let jsqtimer = reactive({
	value:0,
	fun:null,
})

// 在组件渲染完成后执行
onMounted(() => {
	console.log('组件已经渲染完毕');

})
let isFirstBack = true // 添加标记判断是否是第一次返回
let fromIndex = false // 添加标记判断是否从一级页面来
onShow(() => {
  // 从缓存中获取fromIndex
  fromIndex = uni.getStorageSync('fromIndex')
  console.log('fromIndex', fromIndex)

  if(window.history && window.history.pushState) {
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', backChange, false)
  }
})

// 修改 onHide，移除事件监听器而不是添加
onHide(()=>{
	if(jsqtimer.value){
		addClick('停留时间：资料填写页',jsqtimer.value + 's')
		jsqtimer.value = 0
		clearInterval(jsqtimer.fun)
	}
  window.removeEventListener('popstate', backChange, false)
})

const backChange = () => {
  // 根据来源页面决定是否显示确认框
  if (isFirstBack && fromIndex) {
  //   uni.showModal({
  //     title: '提示',
  //     content: '确定要返回上一页吗？',
  //     success: function (res) {
  //       console.log('xxx',res)
  //       if (res.confirm) {
  //         isFirstBack = false
  //         uni.navigateBack()
  //       }
  //       history.pushState(null, null, document.URL)
  //     }
  //   })
    opnebackrouter()
  } else {
    uni.navigateBack()
  }
}

// 组件卸载前移除事件监听和清除缓存
onBeforeUnmount(() => {
  window.removeEventListener('popstate', backChange)
  uni.removeStorageSync('fromIndex')
})

// 弹出退出页面弹框
const wltk = ref(null)
 const opnebackrouter = ()=>{

	wltk.value.open('center')
 }
//  点击页面的退出
 const backindex = () =>{
	addClick('资料填写页','退出资料页-唤起挽留弹窗')
	uni.navigateBack()
 }
//  点击弹框图片
const closebackrouter = ()=>{
	addClick('资料填写页访问','挽留弹窗-点击立即抢占曝光位')

  history.pushState(null, null, document.URL)

  wltk.value.close()
}
// 点击弹框的叉
const tkcc = () => {

	addClick('资料填写页访问','挽留弹窗-关闭')
	
	history.pushState(null, null, document.URL)

	wltk.value.close()
}

const backindexcha = () =>{
  isFirstBack = false
  uni.navigateBack()

  history.pushState(null, null, document.URL)
}




// 地图弹框ref
const mapprops = ref(null)
let styleone = reactive({borderColor: '#FFF',fontSize:'98rpx',})
let styletwo = reactive({backgroundColor:'#fff'})
// 是否上传视频
let myvideo = ref(false)
let user_id = ref(null)

// 表单部分内容
let baseFormData = reactive({
			channel_no:'',
			name: '',
			title:'',
			titlefree:'',
			phone:'',
			area:'',
			rent:'',
			transference:'',
			introduce:'',
			// 封面图片
			cover_img:'',
			province:'北京市',
			city:'北京市',
			county:"东城区",
			township:'',
			detail_address:'',
			location:'',
			checkbox3:'',
			shop_type:'',
			Rapid:0,
			imgs:[],
			// 详细地址
			link:'',
			pois:'',
			yzmcode:null,
			codeshow:true,
			jztp:false,  //控制图片加载中显示隐藏
			longitude:'',// 获取以下经纬度作为显示点击地图判断
			showmakerdwon:false, //是否显示滑动时候的makerdwon
			picker:{
				shop_type_one:'',
				shop_type_two:'',
			},  //三级选择
			isshowshop_type_one:false, //校验联级的时候是否显示
			isshowphone:false, //校验电话的时候不合格

		})
// 监听响应式数据的变化
let title = ref('')
watchEffect(() => {
	if(baseFormData.rent){
		baseFormData.title =  '店铺位于：'+ baseFormData.city + baseFormData.county +',房源面积'+ baseFormData.area+'㎡,店铺租金'+baseFormData.rent+ '元/月，如有意请与我联系'
	}
});

// 输入框提示文字的样式
let placeholderStyle = ref("font-size:28rpx;color:rgba(198, 198, 198, 1);")

// 页头tabs切换
let nofreetransfer = ref(1)

const changetabs = (num) =>{
	nofreetransfer.value = num
}

// 输入框获取到焦点事件
const focus = () =>{
	console.log('我获取到了焦点')
	baseFormData.isshowphone = false
}
	// tabs相关配置
	let aa = reactive(0)
	const list0 = ref([{
		name: '标签1',
		value: 0,
	}, {	
		name: '标签4',
		value: 3,
	}])

	// 上传图片的参数
	const imageFormData = reactive({
		count:2,
		compress:true,
		quality:50,
		size:30,
	})
	// 上传视频的参数
	const videoFromData = reactive({
		maxDuration:30,
		compressed:true,
		// size:'30,
	})

// 上方图片列表
let list = ref([])
/**
 * 删除前钩子
 * @param {Object} item 当前删除的图片或者视频信息
 * @param {Number} index 当前删除的图片或视频索引
 * @param {Function} next 调用此函数继续执行组件删除逻辑
 * */ 
	const beforeDelete = (item, index, next)=> {
		uni.showModal({
			title: '提示信息',
			content: '确定要删除这个文件嘛？',
			success: res => {
				if (res.confirm) {
					console.log("点击确定删除",res.confirm)
					list.value.splice(index,1);
					const listlen  = list.value.filter(item => typeof item === 'object').length;
					console.log("list",listlen)
					if(listlen == 0){
						baseFormData.cover_img = ''
					}
					console.log("item",item)
					// pandua
					if(item.is_video){
						myvideo.value = false
					}
				}
			}
		});
	}
	/**
	* 上传前钩子
	* @param {Object} tempFile 当前上传文件信息
	* @param {Function} next 调用此函数继续执行组件上传逻辑
	* */
	const beforeUpload = (tempFile, next) => {
		console.log('上传前钩子', tempFile);
	
				// 判断链接是否为视频(没有用上)
				// function isVideoLink(link) {
				//   const videoExtensions = ['.mp4', '.mov', '.avi', '.mkv']; // 视频文件扩展名列表
				//   const fileExtension = link.substring(link.lastIndexOf('.')); // 提取链接的文件扩展名

				//   return videoExtensions.includes(fileExtension.toLowerCase());
				// }

				// // 判断链接是否为图片
				// function isImageLink(link) {
				//   const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif']; // 图片文件扩展名列表
				//   const fileExtension = link.substring(link.lastIndexOf('.')); // 提取链接的文件扩展名

				//   return imageExtensions.includes(fileExtension.toLowerCase());
				// }

		// const result = uptype.slice(0, 5);
		// 对于上传视频做限制
		if(myvideo.value == true && tempFile.hasOwnProperty('errMsg')){
			return 	uni.showToast({
								title: '最多只能上传一个视频',
								//将值设置为 success 或者直接不用写icon这个参数
								icon: 'none',
								//显示持续时间为 2秒
								duration: 2000
							}) 
		}
				// 对于上传照片的数量做限制
		const listlen  = list.value.filter(item => typeof item === 'object').length;
		if(listlen >= 6){
			return 	uni.showToast({
						title: '最多上传6张图片',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					}) 
			}

	// 上传图片的时候显示加载中
	baseFormData.jztp = true
		// 判断一下是不是视频
		let tempFile_v1 = ''
		if(tempFile.path){
			tempFile_v1 = tempFile.path
		}else{
			tempFile_v1 = tempFile
		}
		console.log('我是图片还是视频',tempFile.path)

		// 调用上传图片
		upimg(tempFile_v1)
	}
	// 上传图片的接口
	const upimg = (tempFile) =>{
		// uni.showToast({
		// 		title: '图片上传中',
		// 		//将值设置为 success 或者直接不用写icon这个参数
		// 		icon: 'none',
		// 		//显示持续时间为 2秒
		// 		duration: 2000
		// 	}) 
		console.log('tempFile', tempFile)
		uni.uploadFile({
			url: 'https://shop-file.pupuduo.com:8886/api/app/file/upload_img', //仅为示例，非真实的接口地址
			// url: 'http://192.168.1.51:8081/api/app/file/upload_img', 
			filePath: tempFile,
			name: 'file',
			setTimeout:600000,
			success: (uploadFileRes) => {
				console.log("我是服务期上的图片",uploadFileRes)
				upimg_value(uploadFileRes.data)
			}
		});
	}
	// 上传图片返回结果
	const upimg_value = (result) => {
		const obj = JSON.parse(result);
		console.log('返回对象', obj.data);
		const objone = {
			path: obj.data.url,
			is_video:obj.data.is_video
		}
		// 对只能上传一个视频做处理
		if(obj.data.is_video == true){
			myvideo.value = true
		}else if(baseFormData.cover_img == ''){
			baseFormData.cover_img = obj.data.url
		}
		// 返回的结果进行存储
		list.value.push(objone)
		console.log("我是list",list.value)	
					// 把上传的图片数组处理一下
				// 	list.value.map(item => {
				// 	if (item.is_video) {
				// 		return '';
				// 	} else {
				// 		return item.path;
				// 	}
				// });
			// list.value.map(item => item.path);
		baseFormData.imgs = list.value.map(item => item.path);
		baseFormData.imgs = JSON.stringify(baseFormData.imgs);
		console.log("我是图片数组",baseFormData.imgs)
		baseFormData.jztp = false
	}
	// 表单校验规则
	let rules = reactive({
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						},
						{
							minLength: 10,
							maxLength: 11,
							errorMessage: '请填写正确手机号',
						},
						{
							pattern: '^[1][3,4,5,6,7,8,9][0-9]{9}$',
							errorMessage: '请填写正确手机号',
						}]
					},
					area: {
						rules: [{
							required: true,
							errorMessage: '面积不能为空'
						}]
					},
					rent: {
						rules: [{
							required: true,
							errorMessage: '租金不能为空'
						}]
					}
				})
	// 店铺地址全部
	const oldAddressList = reactive(areaData)
	const newAddressList = reactive([
		[],
		[],
		[]
	])
	// 最后显示的值
	const addressList = reactive(['北京市', '北京市', '东城区'])
	const tempAddressList = reactive([])
	// 列表中的值
	const multiIndex = reactive([])

		// 取消时候触发的
	const initMultiIndex = () => {
		if (!addressList) {
			multiIndex[0] = 0;
			multiIndex[1] = 0;
			multiIndex[2] = 0;
			return;
		}
		const province = addressList[0];
		const city = addressList[1];
		const area = addressList[2];

		const provinceObj = oldAddressList.find(item => item.label === province);
		const provinceIndex = oldAddressList.findIndex(item => item.label === province);

		console.log(provinceObj)
		const cityObj = provinceObj.children.find(item => item.label === city);
		const cityIndex = provinceObj.children.findIndex(item => item.label === city);

		const areaObj = cityObj.children.find(item => item.label === area);
		const areaIndex = cityObj.children.findIndex(item => item.label === area);

		multiIndex[0] = provinceIndex
		multiIndex[1] = cityIndex
		multiIndex[2] = areaIndex
		console.log(multiIndex)
	}
	// 把js中的数据遍历到这个数组上去
	const initAddress = () => {
		initMultiIndex();

		newAddressList[0] = oldAddressList.map((item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map(
			(item, index) => {
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

		console.log('newAddressList:', newAddressList);

	}
	// value值改变时候触发
	const pickerChange = (e) => {
		console.log('pickerChange:', e.detail.value);
		const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
		const province = newAddressList[0][provinceIndex].label;
		const city = newAddressList[1][cityIndex].label;
		const area = newAddressList[2][areaIndex].label;
		console.log(province + '-' + city + '-' + area);
		baseFormData.province = province
		baseFormData.city = city
		baseFormData.county = area
		addressList[0] = province
		addressList[1] = city
		addressList[2] = area
	}
	// 某一列值改变时候触发
	const pickerColumnchange = (e) => {
		console.log('pickerColumnchange:', e);
		// 第几列滑动
		// console.log(e.detail.column);
		// 第几列滑动的下标
		// console.log(e.detail.value)
		// 第一列滑动
		if (e.detail.column === 0) {
			multiIndex[0] = e.detail.value;

			newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item,
				index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})
			multiIndex[1] = 0
			multiIndex[2] = 0;
	
			newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
				.children
				.map((item, index) => {
					// console.log('item:',item);
					var obj = {
						label: item.label,
						value: item.value
					}
					return obj
				})

		}
		if (e.detail.column === 1) {
			multiIndex[1] = e.detail.value
			multiIndex[2] = 0;
			newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]]
				.children
				.map((item, index) => {
					console.log('item:',item);
					var obj = {
						label: item.label,
						value: item.value
					}
					return obj
				})
		}
		if (e.detail.column === 2) {
			multiIndex[2] = e.detail.value
		}
	}
	// 取消时候触发
	const pickerCancel = () => {
		initMultiIndex();
	}

	// 联级弹出层弹出
	const popupopened = ()=>{
		baseFormData.isshowshop_type_one = false
	}
		// 选择完成时触发
	const onchange = (e) =>{
		console.log('e1',e)
		// 先把原来的清空
		baseFormData.picker.shop_type_one = ''
		baseFormData.picker.shop_type_two = ''
		baseFormData.shop_type = ''

		baseFormData.picker.shop_type_one = e.detail.value[0].text
		baseFormData.picker.shop_type_two = e.detail.value[1].text ||''
		if(e.detail.value.length >2){
			baseFormData.shop_type = e.detail.value[2].text || ''
		}
	}

	// 首页基础店铺数据类型的接口
	const shop_type_get = () =>{
		let params = reactive({
			type : 1,
			grade:2,
		})
		console.log("params",params) 
		onGotApiData('/api/app/other/type_list','GET',params,grade_type_value)
	}
	// 首页基础店铺数据类型的结果
	const grade_type_value = (result) => {
		// result.forEach((value,index,Array)=>{
		// 	if(value.childList){
		// 		Array[index].childList = JSON.parse(value.childList)
		// 	}
		// })
		store_type.value = result
		// baseFormData.shop_type = store_type.value[0]
		// console.log('发布页面基础数据类型的接口',store_type.value)
	}
	// 店铺类型的选择	
	let store_index = ref(0)
	let store_type = ref([])
	// let store_type_value = ref(null)
	// 选中的店铺类型
	const colorChange = (e) =>{
		console.log("选e",e)
		store_index.value = e.detail.value
		baseFormData.shop_type = store_type.value[store_index.value]
		console.log("选中的",baseFormData.shop_type)
	}

	// 单选框的内容
	// 这个是显示的，不是值
	let current = ref(1)
	let rapid_turn = ref([
				{
					value: '1',
					name: '是'
				},{
					value: '0',
					name: '否'
				},

			],)

	const radioChange = (evt)=> {
		baseFormData.Rapid = evt.detail.value
		console.log('我是单选框',baseFormData.Rapid )
	}

	// 多选框	
	let checkbox2 = ref([])
	let hobby = reactive([{
						text: '临近地铁',
						value: '临近地铁'
					}, {
						text: '居民密集',
						value: '居民密集'
					},
					{
						text: '天然气',
						value: '天然气'
					},
					{
						text: '中央空调',
						value: '中央空调'
					},
					
					{
						text: '停车位',
						value: '停车位'
					},
					{
						text: '电话/网络',
						value: '电话/网络'
					},
					{
						text: '暖气',
						value: '暖气'
					},
					{
						text: '上水',
						value: '上水'
					},
					{
						text: '客梯',
						value: '客梯'
					},
					{
						text: '货梯',
						value: '货梯'
					},
					{
						text: '排烟',
						value: '排烟'
					},
					{
						text: '排污',
						value: '排污'
					},
					{
						text: '可明火',
						value: '可明火'
					},
					{
						text: '380V',
						value: '380V'
					},
					{
						text: '外摆区',
						value: '外摆区'
					},
					{
						text: '黄金地段',
						value: '黄金地段'
					},
					{
						text: '扶梯',
						value: '扶梯'
					},
					{
						text: '下水',
						value: '下水'
					},
					{
						text: '管煤',
						value: '管煤'
					},
					{
						text: '临街门面',
						value: '临街门面'
					},
					{
						text: '可餐饮',
						value: '可餐饮'
					},
					{
						text: '新房',
						value: '新房'
					},
					{
						text: '临街',
						value: '临街'
					},
					{
						text: '社区底商',
						value: '社区底商'
					},
					{
						text: '可空转',
						value: '可空转'
					}])
	// 店铺的适用类型选择
	const shopTypePupop = ref(null) 
	const checkboxarr = () =>{
		console.log('我是多选框的内容',checkbox2.value)
		baseFormData.checkbox3 = checkbox2.value.join(',');
		console.log('我是多选框的内容',baseFormData.checkbox3)
	} 
	const opencheckboxarr = () =>{
		// 打开选择器
		shopTypePupop.value.open('bottom')
	}
	// 关闭选择器
	const closecheckboxarr = () =>{
		shopTypePupop.value.close()
	}
	// 取消选中并且关闭选择器
	const clearcheckboxarr = () =>{
		checkbox2.value = ""
		baseFormData.checkbox3 = ""
		closecheckboxarr()
	}

	//勾选我已阅读
	const range_value = ref(0)
	let range = reactive([{"value": 1}])
	const click_confirm = () =>{
		// console.log("是否会勾选我同意",range_value.value)
		console.log("我是选中的值",range_value.value[0])
	}

	// 短信校验
	const yzcode = () =>{
		// 对手机号进行校验
		const phoneRegex = /^1[3456789]\d{9}$/;
		if(baseFormData.phone == '' || !phoneRegex.test(baseFormData.phone)){
			return uni.showToast({
				title: '请填写正确手机号',
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			})
		}else{
			//显示验证码
			verify.value.show('center')
		}
	}
	//初始化验证码组件
	const verify = ref(false)
	const checkSuccess=(data)=>{

		console.log("图形验证成功",data)
		//验证码验证成功操作
		 verify.value.hide();
		// 掉漆验证码接口
		let params = reactive({
			phone :  baseFormData.phone,
			channel_no:baseFormData.channel_no,
			captchaVerification:data.captchaVerification	
		})
		ongetphone('/public/send_code','POST',params,yzmcode_value)
	}
	// 验证码返回回调
	const yzmcode_value = (result) =>{
		console.log('result')
		if(result.code == 200){
			baseFormData.codeshow = false
			// 倒计时
			untime()
		}else{
			return uni.showToast({
				title: result.message,
				icon: 'none',
				//显示持续时间为 2秒
				duration: 2000
			})
		}
		
	}

	let unitime_value = ref(60)
	const untime = () =>{
		setInterval(()=>{
			if(unitime_value.value < 2){
				baseFormData.codeshow = true
				unitime_value.value = 60
				return
			}else{
				unitime_value.value --
			}
		}, 1000);
	}

	// 确认发布 ,绑定ref
	const baseForm = ref(null)
		// 发布加一个节流
	let lastClickTime =ref(0)
	const to_release = () => {
			addClick('资料填写页','点击资料提交-' + props.indextoxq  )
		const currentTime = Date.now();
		console.log("当前时间",currentTime)
		if (currentTime - lastClickTime.value > 1200) {
			// 执行支付
			release()
			lastClickTime.value = currentTime
		} else {
			lastClickTime.value = currentTime
		}
	}
// 提交表单
const release =() =>{

		// 上传一张封面图片
			// if(!baseFormData.cover_img){
			// 	return uni.showToast({
			// 			title: '请上传图片',
			// 			//将值设置为 success 或者直接不用写icon这个参数
			// 			icon: 'none',
			// 			//显示持续时间为 2秒
			// 			duration: 1500
			// 		}) 
			// }

		// 是否进行勾选
		if(!baseFormData.phone){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写电话',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
				
			}
		// 对手机号进行校验
		const phoneRegex = /^1[3456789]\d{9}$/;
			if(!phoneRegex.test(baseFormData.phone)){

				baseFormData.isshowphone = true

				return uni.showToast({
					title: '请填写正确的手机号',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}

			baseFormData.isshowphone = false
		// 如果是免费的发布调用免费发布接口
		if(nofreetransfer.value == 0){

			if(!baseFormData.titlefree){
				placeholderStyle.value = "font-size:28rpx;color:red"
				return	uni.showToast({
						title: '请填写标题',
						//将值设置为 success 或者直接不用写icon这个参数
						icon: 'none',
						//显示持续时间为 2秒
						duration: 1500
					}) 
			}
			freerelease()
			return
		}

		if(!baseFormData.area){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写店铺面积',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}
		if(!baseFormData.rent){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写店铺租金',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}

		// if(!baseFormData.picker.shop_type_one){
		// 	// 开启校验提示
		// 	baseFormData.isshowshop_type_one = true

		// 	return	uni.showToast({
		// 			title: '请填写店铺原用途',
		// 			//将值设置为 success 或者直接不用写icon这个参数
		// 			icon: 'none',
		// 			//显示持续时间为 2秒
		// 			duration: 2000
		// 		}) 
		// 	}
		// if(baseFormData.county==[]||baseFormData.county==''||baseFormData.city==[]||baseFormData.city==''||baseFormData.province==[]||baseFormData.province==''){
		// 	return uni.showToast({
		// 			title: '请选择店铺地址',
		// 			//将值设置为 success 或者直接不用写icon这个参数
		// 			icon: 'none',
		// 			//显示持续时间为 2秒
		// 			duration: 1500
		// 		}) 
		// }
		if(!baseFormData.title){
			placeholderStyle.value = "font-size:28rpx;color:red"
			return	uni.showToast({
					title: '请填写转让标题',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
			}
		// 标题赋值
		// if(!baseFormData.title){
		// 	baseFormData.title = title.value
		// }
		
		// if(!baseFormData.yzmcode){
		// 	return uni.showToast({
		// 			title: '请输入手机验证码',
		// 			//将值设置为 success 或者直接不用写icon这个参数
		// 			icon: 'none',
		// 			//显示持续时间为 2秒
		// 			duration: 1500
		// 		}) 
		// }
		
			// 表单请求环节
			let params = reactive({
				page_source: props.PublishSource,
				phone: baseFormData.phone,
				cover_img:baseFormData.cover_img,
				title:baseFormData.title,
				province:baseFormData.province,
				city:baseFormData.city,
				county:baseFormData.county,
				detail_address:baseFormData.detail_address,
				location:baseFormData.location,
				feature_label:baseFormData.checkbox3,
				shop_type:baseFormData.shop_type,
				// shop_first_type:baseFormData.shop_type.parent_id,
				shop_area:baseFormData.area,
				rent:baseFormData.rent,
				transfer_fee:baseFormData.transference,
				is_swerve:baseFormData.Rapid,
				detailed_introduction:baseFormData.introduce,
				user_id:user_id.value,
				imgs:baseFormData.imgs,
				channel_no:baseFormData.channel_no,
				link:baseFormData.link,
				poi:baseFormData.pois, 
				shop_type_one:baseFormData.picker.shop_type_one,
				shop_type_two:baseFormData.picker.shop_type_two,
				// code:baseFormData.yzmcode,
			})
			// 填写的表单
			console.log("params",params)
			// 判断这个表单是否提交过
			// 取到之前的表单
			// const params_transference = uni.getStorageSync('params_transference');
			// const params1 = JSON.stringify(params)
			// if(params1 == params_transference){
			// 	const transference_id = uni.getStorageSync('transference_id');
			// 	const transference_shop_type = uni.getStorageSync('transference_shop_type');
			// 	const transference_money = uni.getStorageSync('transference_money');
			// 	const pages = uni.getStorageSync('pages');
			// 	uni.navigateTo({
			// 		url: pages + '?shop_id=' + transference_id + '&shop_type=' + transference_shop_type + '&money=' + transference_money,
			// 	});
			// }else{
			// 	// 没有调教或者数据改变过
			// 	uni.setStorageSync('params_transference',JSON.stringify(params));
				// 判断有没有选择位置
			// const mylongitude = uni.getStorageSync('longitude')|| null
			// if(!mylongitude){
			// 	// 是否选择位置信息之后直接发布
			// 	mapval.isfb = true
			// 	mapprops.value.open('center')
			// 	console.log("baseFormData",baseFormData)
			// 	return
			// }
			// 存储手机号
				uni.setStorageSync('phone', baseFormData.phone);
				onGotApiData('/h5/api/app/shop_transfer/v2/add_pay','POST',params,add_from)

	}
// 表单提交之后返回的结果
const add_from = (result) => {
	console.log("上传之后返回的结果",result)
	if(result.message){
		uni.showToast({
			title: result.message,
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'none',
			//显示持续时间为 2秒
			duration: 2000
		}) 
	}else{
		uni.showToast({
			title: '发布成功',
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'none',
			//显示持续时间为 2秒
			duration: 2000
		}) 
	}
}

// 调用免费发布的接口
const freerelease = () =>{
	// 表单请求环节
	let params = reactive({
		phone: baseFormData.phone,
		title:baseFormData.titletwo,
		channel_no:baseFormData.channel_no,
		location:baseFormData.location,
		link:baseFormData.link,
	})
	// 填写的表单
	console.log("params",params)

	onGotApiData('/h5/api/app/shop_transfer/v2/add_free','POST',params,freerelease_from)
}
const freerelease_from = (result) =>{
	console.log("免费接口发布返回的值",result)
	if(result.message){
		uni.showToast({
			title: result.message,
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'none',
			//显示持续时间为 2秒
			duration: 2000
		}) 
	}else{
		uni.showToast({
			title: '发布成功',
			//将值设置为 success 或者直接不用写icon这个参数
			icon: 'none',
			//显示持续时间为 2秒
			duration: 2000
		}) 
		uni.navigateTo({
			url: '/pages/free_shop/free_shop?shop_id=' + result.shop_id
		});

	}
}

// 跳转到选择详情页面
	const tomap = () =>{
		// uni.navigateTo({
		// 	url: '/pages/map/map'
		// });
		mapprops.value.open('center')
	}

// 弹框地图相关内容
const mapval = reactive({
	formatted_address:'',   // 详细地址
	id:0, // 使用 marker点击事件 需要填写id
	isfb:false, 	// 是否选择位置信息之后直接发布
	title: 'map',
	latitude: 31.249571, 
	longitude: 121.45575, 
	scale: 16,
	markers: [
        {
          id: 1,
          latitude: 31.249571, // 初始Marker的纬度
          longitude: 121.45575, // 初始Marker的经度
          iconPath: '', // 自定义Marker图标路径
          width: 30, // Marker图标宽度
          height: 45, // Marker图标高度
		//   anchor:{x:5, y: 1}
        },
      ],
	})

const handleRegionChange = (e) => {
	console.log('滑动屏幕取到的经纬度11',e.detail)
	if(e.detail.type === "begin"){
		// baseFormData.showmakerdwon = true
	}
	if(e.detail.type === "end"){
		// baseFormData.showmakerdwon = false
		// 获取地图中心点坐标
      const { latitude, longitude } = e.detail.centerLocation;
      
    //   更新Marker位置
      mapval.markers[0].latitude = latitude;
      mapval.markers[0].longitude = longitude;
      // 更新data中的经纬度
      mapval.latitude = latitude;
      mapval.longitude = longitude;
		// 在这里可以根据获取到的定位信息进行相应的处理
		map(latitude,longitude)
		// 将经纬度缓存
		uni.setStorageSync('longitude',JSON.stringify(longitude))
		uni.setStorageSync('latitude', JSON.stringify(latitude))
		baseFormData.location = ""+longitude+ ',' +latitude
	}
}
// 点击定位
const onpositioning = () =>{
	// console.log('aaa',)
	uni.getLocation({
		type: 'gcj02',
		success: function(res) {
			const latitude = res.latitude; // 纬度
			const longitude = res.longitude; // 经度
			const speed = res.speed; // 速度
			const accuracy = res.accuracy; // 精确度
			console.log("经度",longitude)
			console.log("纬度",latitude)
			// 在这里可以根据获取到的定位信息进行相应的处理
			map(latitude,longitude)
			// 将经纬度缓存
			uni.setStorageSync('longitude',JSON.stringify(longitude))
			uni.setStorageSync('latitude', JSON.stringify(latitude))
			mapval.longitude = longitude
			mapval.latitude = latitude
			mapval.markers[0].longitude = longitude
			mapval.markers[0].latitude = latitude
			baseFormData.location = ""+longitude+ ',' +latitude
		},
		fail: function(err) {
			console.log('获取定位失败', err);
			reonpositioning()
		}
	});
}
const map = (latitude,longitude) => {
	const location_value = '' + longitude + ',' + latitude

	let params = reactive({
		link : baseFormData.link ,
		location:location_value,
		// link : 'https://shop-h5.shiying1258.cn/shop/index.html#/?channelNo=SY_PPZ_V4_1001&projectid=123123' ,
		// location: '121.45088, 31.25145'
	})
	console.log("params",params)
	onGotApiData('/api/app/other/geo','GET',params,map_value)
	
	// 统计一下地理编码那
	addClick('H5信息提交页面','逆地理编码')
			  
	}
	const map_value = (res) =>{
		console.log("全部",res);
		const adressinformation = res.regeocode.addressComponent
		let address = ''
		if(adressinformation.streetNumber&&adressinformation.streetNumber.number){
			address = adressinformation.province + adressinformation.city + adressinformation.district +adressinformation.township + adressinformation.streetNumber.street + adressinformation.streetNumber.number
		}else{
			address = adressinformation.province + adressinformation.city + adressinformation.district +adressinformation.township 
		}
		//  const address = res.regeocode.formatted_address
		baseFormData.pois = JSON.stringify(res.regeocode.pois)
		console.log("首页定位地图返回的全部",res);
		console.log("地图返回的地址",address);
		uni.setStorageSync('formatted_address',address)
		mapval.formatted_address = address
		baseFormData.detail_address = address
			// 省市区（为了传给发布页）
		let province = res.regeocode.addressComponent.province
		let city = res.regeocode.addressComponent.city
		baseFormData.province = res.regeocode.addressComponent.province
		baseFormData.city = res.regeocode.addressComponent.city
		// 直辖市的情况
		if(res.regeocode.addressComponent.province == "重庆市" || res.regeocode.addressComponent.province == "北京市"|| res.regeocode.addressComponent.province =="上海市"|| res.regeocode.addressComponent.province == "天津市"){
			city = res.regeocode.addressComponent.province
			baseFormData.city = res.regeocode.addressComponent.province
		}
		// 获取到的区，下面也有
		let district = res.regeocode.addressComponent.district
		baseFormData.county = res.regeocode.addressComponent.district
		baseFormData.township = res.regeocode.addressComponent.township
		// console.log("地图返回的地址",res.regeocode.addressComponent.district);
		if(res.regeocode.addressComponent.district == []|| res.regeocode.addressComponent.district == ''){
			district = res.regeocode.addressComponent.township
			baseFormData.county = res.regeocode.addressComponent.township
		}
		// 做缓存发布时候用
		uni.setStorageSync('province', province);
		uni.setStorageSync('city', city);
		uni.setStorageSync('district',district);
					
	}
	// 取消地图
	const closemap = () =>{
		mapprops.value.close()
	}
	// 跳转到信息发布页面
	const torelease = () =>{
		if(!mapval.formatted_address){
			return uni.showToast({
					title: '请滑动屏幕选择商铺具体位置',
					//将值设置为 success 或者直接不用写icon这个参数
					icon: 'none',
					//显示持续时间为 2秒
					duration: 1500
				}) 
		}
		closemap()
		if(mapval.isfb){
			mapval.isfb = false
			release()
		}
		
	}
	// 重新吊起定位
	const reonpositioning = () =>{
		        // 在这里重新吊起授权框
		navigator.geolocation.getCurrentPosition(
          function(position) {
            // 用户重新授权成功，获取位置信息
			console.log('重新授权成功',position)
					// 获取位置
			onpositioning()
          },	
          function(error) {
            // 用户仍然拒绝位置权限
			console.log('重新授权失败',error)
          }
        );
	}

</script>

<style lang="scss" scoped>
	.out-box {
		min-height: calc(100vh - 30rpx);
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		padding-top: 30rpx;
		background-color: rgba(246, 247, 251, 1);
		font-family: PingFang SC, PingFang SC;
		width: 750rpx auto;
		.tabs{
			width: 600rpx;
			height: 100rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-around;
			// border: 1px solid black;
			.tabs_item{
				width: 200rpx;
				height: 100rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 70rpx;
				text-align: center;
				.name{
					width: 200rpx;
					height: 80rpx;
					font-size: 32rpx;
					color: #000000;
					line-height: 84rpx;
				}
				.colorblack{
					width: 40rpx;
					height: 10rpx;
					background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
					border-radius: 10rpx;
					margin: 0 auto;
				}
			}
		}
		.henfu{
			width: 710rpx;
			height: 80rpx;
			border-radius: 12rpx;
			background: rgba(194, 217, 255, 1);
			margin: 0 auto;
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			color: rgba(0, 119, 255, 1);
			text-align: center;
		}
		.upimg{
			width: 710rpx;
			// height: 280rpx;
			background: #FFFFFF;
			border-radius:16rpx;
			margin: 0 auto;
			// margin-top: 30rpx;
			.imglist{
				width: 400rpx;
				height: 50rpx;
				padding-top: 30rpx;
				margin: 0 0 0 30rpx;
				font-size: 28rpx;
				color: #000000;
				line-height: 60rpx;
				.span1{
					font-size: 22rpx;
					color: #898989;
				}
			}
		}	
		.adress{
			width: 710rpx;
			height: 176rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.adressName{
				width: 710rpx;
				height: 50rpx;
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;
				.name{
					width: 440rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					margin: 0 0 0 30rpx;
					// border: 2px solid black;
					.span1{
						font-size: 22rpx;
						color: #898989;
					}
				}
				.adree_icon{
					width: 170rpx;
					height: 40rpx;
					// border: 2px solid black;
					display: flex;
					.img{
						width: 18rpx;
						height: 22rpx;
						margin: 9rpx;
					}
					.text{
						width: 96rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #005CF1;
						line-height: 40rpx;
					}
				}
			}
			.adressTextarea{
				width: 640rpx;
				height: 80rpx;
				// border: 1px solid black;
				margin: 0 auto;
				padding-top: 10rpx;
				font-size: 28rpx;
				color: black;
				line-height: 40rpx;
			}
			.adressimg{
				width: 650rpx;
				height: 90rpx;
				// border: 1px solid black;
				margin: 0 auto;
				background: url('../../static/images/clickmap.png') no-repeat;
				background-size: 100% 100%;
				display: flex;
				.img{
					width: 28rpx;
					height: 32rpx;
					margin: 30rpx 0 0 230rpx;
				}
				.text{
					width: 200rpx;
					height: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					margin: 30rpx 0 0 2rpx;
				}
			}
		}
		.user{
			width: 710rpx;
			// height: 300rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.user_item{
				width: 660rpx;
				height: 80rpx;
				padding-top: 20rpx;
				margin: 0 auto;
				display: flex;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				position: relative;
				.isjy{
					width: 300rpx;
					height: 30rpx;
					// border: 1px solid #999;
					position: absolute;
					top: 84rpx;
					left: 180rpx;
					z-index: 999;
					font-size: 22rpx;
					color: red;
					line-height: 30rpx;
					text-align: center;
				}
				.name{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 80rpx;
				}
				.user_input{
					width: 400rpx;
					height: 60rpx;
					padding: 10rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 60rpx;
				}
				.Address-item{
					width: 430rpx;
					height: 50rpx;
					// border: 1px solid black;
					font-size: 28rpx;
					color: #000000;
					line-height: 50rpx;
					margin-top: 14rpx;
				}
				.address_i{
					width: 32rpx;
					height: 32rpx;
					background: url('../../static/images/4.png');
					background-size: 100%;
					margin: 20rpx 0 0 0rpx;
				}
			}
		}
		.facilities{
			width: 710rpx;
			height: 320rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			.facilities_item{
				width: 650rpx;
				height: 130rpx;
				padding-top: 30rpx;
				margin: 0 auto;
				border-bottom: 1px solid rgba(240, 240, 240, 1);
				position: relative;
				.name{
					width: 500rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}
				.isjy{
					width: 300rpx;
					height: 30rpx;
					// border: 1px solid #999;
					position: absolute;
					top: 140rpx;
					z-index: 999;
					font-size: 22rpx;
					color: red;
					line-height: 30rpx;
					text-align: center;
				}
				.item_delete{
					width: 650rpx;
					height: 90rpx;
					display: flex;
					// border: 1px solid black;
					.text{
						width: 560rpx;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						color: #C6C6C6;
					}
					.text1{
						width: 560rpx;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 28rpx;
						color: #000;
						overflow: hidden;
					}
					.img{
						width: 24rpx;
						height: 20rpx;
						margin: 32rpx;
					}
					:deep(.input-value-border){
						border: none;
					}
					:deep(.input-value){
						margin-top: 10rpx;
						font-size: 28rpx;
						padding-left: 0;
					}
					:deep(.arrow-area){
						display: none;
					}
					:deep(.uni-icons){
						display: none;
					}
					
				}
			}
		}
		.buttom{
			width: 100vw;
			height: 200rpx;
			// border: 1px solid black;
			position: fixed;
			bottom: 0;
			// left: 20rpx;
		}
		.buttom1{
			width: 710rpx;
			height: 90rpx;
			background: linear-gradient(270deg, rgba(0, 92, 241, 1) 0%, rgba(83, 149, 255, 1) 100%);
			border: 1px solid #fff;
			border-radius: 12rpx;
			margin-left: 20rpx;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;

		}
		.buttom2{
			width: 710rpx;
			height: 86rpx;
			background: #fff;
			border-radius: 12rpx;
			border: 1px solid rgba(42, 130, 228, 1);
			margin-left: 20rpx;
			font-size: 34rpx;
			color: rgba(42, 130, 228, 1);
			line-height: 86rpx;
			text-align: center;
			margin-top: 4rpx;
		}
	}

// 短信验证的样式
.Verificationcode{
	width: 720rpx;
	height: 100rpx;
	// border: 1px solid black;
	border-top: 1px solid rgba(237, 237, 237, 1);
	display: flex;
	.codename{
		width: 154rpx;
		height: 100rpx;
		// background-color: pink;
		color: #000;
		margin: 0 0 0 0rpx;
		font-size: 28rpx;
		font-weight: 800;
		line-height: 100rpx;
	}
	#codeinput{
		width: 330rpx;
		height: 70rpx;
		// background-color: #F20;
		margin: 16rpx 0 0 40rpx;
		color: #000;
		font-size: 28rpx;
	}
	.gercode{
		width: 170rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background: rgba(252, 100, 66, 1);
		margin: 20rpx 0 0 0rpx;
		color: #fff;
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
	}
	.nullcode{
		width: 200rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background: rgba(209, 209, 209, 1);
		margin: 20rpx 0 0 0rpx;
		color: rgba(56, 56, 56, 1);
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
	}
}
// 地图相关样式
.mapcenter{
	min-height: 100vh;
	width: 100vw;
	max-width: 750rpx;
	margin: 0 auto;
	overflow: hidden;
	background-color: rgb(236, 234, 234);
	font-family: '思源黑体';
	width: 750rpx auto;
	position: relative;
	.map{
		width: 750rpx;
		height: 1000rpx;
	}
	// 滑动的时候的定位点
	.movemakerdown{
		width: 60rpx;
		height: 90rpx;
		background: url('../../static/images/mapmarker3.png') no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 413rpx;
		left: 344rpx;
	}
	.mapicon{
		width: 70rpx;
		height: 70rpx;
		background-color: #fff;
		border-radius: 10rpx;
		position: absolute;
		top: 900rpx;
		left: 650rpx;
		.img1{
			width: 48rpx;
			height: 48rpx;
			margin: 11rpx;
		}
	}
	.illustrate{
		width: 750rpx;
		height: calc(100vh - 1000rpx);
		background-color: rgba(245, 245, 245, 1);
		.tit{
			width: 700rpx;
			height: 60rpx;
			margin: 0 auto;
			border-radius: 10rpx 10rpx 0 0;
			padding-top: 20rpx;
			font-size: 40rpx;
			line-height: 50rpx;
			font-weight: 600;
			color: #000;
			.span1{
				font-size: 30rpx;
				line-height: 50rpx;
				font-weight: 400;
				color: rgb(81, 141, 237);
			}
		}
		.adress{
			width: 700rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			// background-color: pink;
			font-size: 30rpx;
			line-height: 50rpx;
			font-weight: 400;
			color: rgb(10,10,10);
		}

		.title_sty2{
			width: 660rpx;
			height: 120rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			color: rgb(0, 0, 0);
			padding: 10rpx;
			line-height: 50rpx;
			font-size: 26rpx;
			border-radius: 10rpx;
			border: 1px solid rgb(170, 171, 172);
		}
		.sbmits{
			width: 660rpx;
			height: 80rpx;
			margin: 0 auto;;
			margin: 0 auto;
			font-size: 32rpx;
			font-weight: 700;
			line-height: 80rpx;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			display: flex;
			.close{
				width: 200rpx;
				height: 80rpx;
				margin: 0 auto;;
				border-radius: 6px;
				border: 1px solid #5395FF;
				color: #5395FF;
			}
			.sbmit{
				width: 440rpx;
				height: 80rpx;
				margin: 0 auto;;
				border-radius: 6px;
				background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
				border: 1px solid #5395FF;
			}
		}

	}
}
.shopType{
	width: 750rpx;
	height: 300prx;
	margin: 0 auto;
	background-color: #fff;
	position:relative;
	.chacha{
		width: 58rpx;
		height: 58rpx;
		background: url(../../static/images/chacha.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 20rpx;
		left: 670rpx;
	}
	.title{
		width: 750rpx;
		padding-top: 20rpx;
		height: 90rpx;
		line-height: 70rpx;
		color: #000;
		text-align: center;
		font-size: 32rpx;
	}	
	.checkbox{
		width: 660rpx;
		margin: 0 auto;
		:deep(.uni-data-checklist){
			width: 710rpx;
			margin: 0 auto;
		}
	}
	.sure{
		width: 750rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		text-align: center;
		.colse{
			width: 200rpx;
			height: 60rpx;
			border: 1px solid #999;
			color: rgba(0, 92, 241, 1);
			border-radius: 10rpx;
		}
		.qr{
			width: 200rpx;
			height: 60rpx;
			background-color: rgba(0, 92, 241, 1);
			border: 1px solid rgba(0, 92, 241, 1);
			color: #fff;
			border-radius: 10rpx;
		}
	}
}
.wltkcss{
	width: 620rpx;
	height: 900rpx;
	background: url('/static/images/资料tianxie.png')no-repeat;
	background-size: 100% 100%;
	position: relative;
	.colse{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 920rpx;
		left: 280rpx;
	}	
}
</style>
